<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        td,
        th {
            border: 1px solid;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>商品</th>
                <th>单价</th>
                <th>操作</th>
                <th>总价</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        const tbody = document.querySelector('tbody');

        const data = [{
                id: 1,
                name: '草莓丸奶',
                price: 15,
                count: 1
            },
            {
                id: 2,
                name: '榛子拿铁',
                price: 35,
                count: 1
            },
            {
                id: 3,
                name: '草莓啵啵橙橙',
                price: 15,
                count: 3
            },
            {
                id: 4,
                name: '小梁勇闯田总',
                price: 5.5,
                count: 2
            }
        ];

        function render() {
            tbody.innerHTML = data.map(item =>
                `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>
                        <input type="button" value="-" data-id='${item.id}'> 
                        ${item.count}
                        <input type="button" value="+" data-id='${item.id}'> 
                    </td>
                    <td>${item.price*item.count}</td>
                </tr>
                `).join('')
        }
        render();


        tbody.onclick = function (event) {
            if (event.target.value == '+') {
                let result = data.filter(item => item.id == event.target.  dataset.id)[0];
                console.log(result);
                result.count++;
                render()
            }
            if (event.target.value == '-') {
                let goods = data.filter(item => item.id == event.target.dataset.id)[0];
                console.log(goods);
                if (goods.count > 0) {
                    goods.count--;
                    render()
                }
            }
        }
    </script>
</body>

</html>